<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .con {
            width: 100px;
            height: auto;
            /* 子元素撑开 */
            background-color: red;
            text-align: center;
        }

        .content {
            background-color: green;
        }
    </style>
    <script>
        window.onload = function () {
            //获取需要操作的元素对象
            //菜单
            var item = document.querySelectorAll(".item");

            //展示的内容
            var content = document.querySelectorAll(".content");

            //为需要点击的菜单绑定事件
            for (var i = 0; i < item.length; i++) {
                //调用函数去绑定事件
                bind(i);
            }

            //声明一个函数用于绑定事件
            function bind(index) {
                item[index].onclick = function () {
                    //根据判断条件显示或隐藏内容块
                    //判断 显示-隐藏  隐藏-显示
                    if (content[index].style.display == 'none') {//隐藏
                        content[index].style.display = 'block';//显示

                        //同时只能显示一块
                        //点击当前菜单显示对应的内容块 其他内容一律隐藏
                        //循环将所有内容找一遍
                        for (let i = 0; i < content.length; i++) {
                            //判断除了当前和菜单匹配的内容外其他隐藏
                            //找到不和当前菜单匹配的内容块 且 是展开的
                            if (i != index && content[i].style.display == "block") {
                                //隐藏
                                content[i].style.display = 'none';

                            }
                        }




                    } else {
                        content[index].style.display = 'none';//显示-隐藏
                    }

                }
            }






        }

    </script>
</head>

<body>

    <!-- 外层容器 -->
    <div class="con">
        <!-- 菜单列表 -->
        <ul class="menu">
            <li class="item">
                <p>菜单1</p>
                <!-- 内容 -->
                <ul class="content" style="display:  none;">
                    <li>子菜单1</li>
                    <li>子菜单2</li>
                    <li>子菜单3</li>
                </ul>
            </li>
            <li class="item">
                <p>菜单2</p>
                <!-- 内容 -->
                <ul class="content" style="display:  none;">
                    <li>子菜单1</li>
                    <li>子菜单2</li>
                    <li>子菜单3</li>
                </ul>
            </li>
            <li class="item">
                <p>菜单3</p>
                <!-- 内容 -->
                <ul class="content" style="display:  none;">
                    <li>子菜单1</li>
                    <li>子菜单2</li>
                    <li>子菜单3</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>